<template>
  <div class="header_container2020 clearfix">
    <div id="kj_logo">
      <a href="/">
        <img src="~/assets/images/logo.jpg" alt="" v-show="!$isMobile" />
        <img src="~/assets/images/logo.png" v-show="$isMobile" alt="" />
      </a>
    </div>
    <img
      class="nav_img "
      @click.stop="openNav"
      src="~/assets/images/nav.png"
      alt=""
    />
    <div class=" header_nav">
      <div class="header_container__inner">
        <ul id="router">
          <li
            v-for="(val, index) in menuOptions"
            :key="index"
            @click="naver(val)"
          >
            <a
              href="javscript:void(0);"
              :class="{ active: menuSelected === val.value }"
            >
              {{ val.name }}</a
            >
          </li>
        </ul>
      </div>
    </div>
    <div
      class="mobile-header-view-container"
      @click="closeNav"
      :class="{ show: isOpenNav }"
    >
      <mobileHeaderView ref="navbox" @close="closeNav"></mobileHeaderView>
    </div>
  </div>
</template>

<script>
import mobileHeaderView from "@/components/mobileHeaderView";

export default {
  components: { mobileHeaderView },
  data() {
    return {
      menuSelected: "home",
      menuOptions: [
        {
          name: "首页",
          value: "home"
        },
        {
          name: "推荐视频",
          value: "recommand"
        },
        {
          name: "最新视频",
          value: "new"
        },
        {
          name: "全部视频",
          value: "review"
        },
        {
          name: "热门资讯",
          value: "news"
        }
      ],
      isOpenNav: false
    };
  },
  methods: {
    openNav() {
      this.isOpenNav = true;
      this.$refs.navbox.open();
    },
    closeNav() {
      this.isOpenNav = false;
    },
    naver(val) {
      this.menuSelected = val.value;
      var obj = document.getElementById(val.value);
      var oPos = obj.offsetTop;
      return window.scrollTo(0, oPos - 36);
    }
  }
};
</script>

<style lang="scss" scoped>
.header_container2020 {
  position: relative;
  width: 100%;
  background: #e0e0e0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  img {
    border: none;
    vertical-align: top;
  }
  #kj_logo {
    float: left;
    width: 3rem;
    height: $header_height;
    transition: all 0.2s;

    img {
      height: $header_height;
    }
  }
  .nav_img {
    display: none;
    width: 0.5rem;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 15px;
    @include atSmall {
      display: block;
    }
  }

  a {
    text-decoration: none;
    color: #000;
  }

  .header_nav {
    width: 100%;
    height: 50px;
    background: #fff;
    .header_container__inner {
      width: 1200px;
      height: 50px;
      margin: 0 auto;
      ul {
        margin: 0;

        li {
          float: left;
          line-height: $header-line-height;
          font-size: 15px;
          color: #8d8d8d;
          margin-right: 22px;
          a {
            color: #8d8d8d;
            &.active,
            &:hover {
              color: #e1140a !important;
            }
          }
        }
      }
    }
    @include atSmall {
      display: none;
    }
  }
}

.mobile-header-view-container {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
  font-size: 0;
  text-align: right;
  display: none;

  &.show {
    display: block;
  }
}
</style>
